@import "./var.scss";

.description-popover{
  width: 352px;
  color: #666;
}

.coupons-popover{
  width: 700px;
  padding: 0 10px 10px;
  p{
    margin: 0;
  }
  h3{
    padding: 5px 0 15px;
    margin-bottom: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px dashed #f2f2f2;
  }
}

// 详情
.common-detail-page {
  margin-bottom: 10px;
  .detail-wrap {
    background-color: #fff;
    .detail-title {
      padding: 25px 25px 0;
    }
  }
  .detail-title {
    font-size: 26px;
    color: #3f3f3f;
    line-height: 150%;
    font-weight: 400;
    word-break: break-all;
    margin: 0;
  }
  // 产品参数
  .product {
    margin-bottom: 15px;
    padding: 20px;
    background-color: #fff;
    border-bottom: 3px solid #e5e5e5;
    zoom: 1;
    overflow: auto;
    .product-left {
      width: 660px;
      height: 370px;
      float: left;
      outline: 1px solid #f2f2f2;
      video, img {
        width: 660px;
        height: 370px;
      }
      &.video{
        ul{
          bottom: 38px;
        }
      }
    }
    .product-right {
      width: 470px;
      padding-right: 10px;
      float: right;
      h1 {
        max-height: 65px;
        margin: 5px 0 15px;
        overflow: hidden;
        color: #3f3f3f;
        line-height: 1.4;
        font-size: 24px;
        font-weight: normal;
        word-break: break-all;
      }
      .product-price {
        position: relative;
        border: 1px solid #ffecb3;
        background-color: #fffef6;
        padding: 5px 10px;
        span {
          color: $priceColor;
          font-size: 24px;
          font-family: Arial;
        }
        b {
          margin-right: 3px;
          font-size: 40px;
          font-family: Arial;
          font-weight: bold;
          color: $priceColor;
        }
        em {
          color: #999;
          font-size: 14px;
        }
      }
      .location,
      .produce {
        position: relative;
        padding: 12px 0 0 70px;
        color: #666;
        & > span {
          position: absolute;
          left: 0;
        }
      }
      .produce {
        min-height: 40px;
        max-height: 165px;
        overflow: hidden;
        p{
          text-align: justify;
        }
        .more{
          width: 60px;
          position: absolute;
          right: 0;
          top: 143px;
          padding: 2px 0;
          text-align: right;
          color: $mainColor;
          font-size: 12px;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.75), white);
          &:hover{
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
      .coupon-box{
        position: relative;
        margin-top: 10px;
        color: #888;
        h5{
          padding: 5px 10px;
          background-color: #FCF9EA;
          font-size: 16px;
        }
        .list{
          a,span,i{
            display: inline-block;
            word-break: keep-all;
          }
        }
        .activity{
          font-size: 0;
          p{
            &+p{
              margin-top: 8px;
            }
          }
          a{
            display: block;
            position: relative;
            padding: 0 0 1px 80px;
            overflow: hidden;
          }
          em{
            font-size: 12px;
          }
          i{
            position: absolute;
            left: 0;
            width: 72px;
            margin: 0 10px 2px 0;
            padding: 2px 8px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            background-color: #ff7802;
            &::after{
              position: absolute;
              right: -10px;
              top: 50%;
              margin-top: -5px;
              content: '';
              display: block;
              width: 0;
              height: 0;
              border: 5px solid #ff7802;
              border-top: 5px solid transparent;
              border-bottom: 5px solid transparent;
              border-right: 5px solid transparent;
            }
          }
          span{
            display: inline-block;
            max-width: 375px;
            margin: 2px 5px 4px 1px;
            padding: 0 8px;
            background-color: #FCF9EA;
            outline: 1px solid $mainColor;
            color: $mainColor;
            font-size: 12px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: -6px;
            &:hover{
              text-decoration: underline;
            }
          }
        }
        .coupon{
          margin: 6px 0 3px;
          span{
            position: relative;
            margin: 0 10px 2px 0;
            padding: 2px 10px;
            background: linear-gradient(to right, #fc6076, #ff9a44);
            border-radius: 2px;
            color: #fff;
            &::before,
            &::after{
              display: block;
              position: absolute;
              top: 50%;
              margin-top: -2px;
              content: '';
              background-color: #fff;
              width: 5px;
              height: 5px;
              border-radius: 100%;
            }
            &::before{
              left: -3px;
            }
            &::after{
              right: -3px;
            }
          }
          em{
            font-size: 12px;
            &:hover{
              cursor: pointer;
              opacity: 0.85;
            }
          }
          strong{
            color: $mainColor;
            font-weight: normal;
            font-size: 15px;
          }
        }
      }
    }
    &.product-coupon{
      h1{
        margin-bottom: 10px;
      }
      .location,
      .produce {
        padding-top: 5px;
      }
      .produce{
        max-height: 105px;
        p{
          line-height: 1.4;
        }
        .more{
          top: 82px;
        }
      }
    }
  }
  .detail,
  .message,
  .comment {
    padding: 25px;
    background: #fff;
    color: #555;
    & > section,
    & > article {
      padding: 25px 20px;
    }
  }
  // 详情
  .detail {
    & > article {
      padding: 0;
    }
    .text {
      color: #555;
      line-height: 24px;
    }
    .text-item {
      & + .text-item {
        margin-top: 10px;
      }
    }
    .editor {
      background-color: #fff;
    }
    img {
      margin: 5px 0;
      max-width: 100%;
      border: 1px solid #eee;
    }
    a{
      text-decoration: underline;
    }
  }
  // 须知
  .message {
    border-top: 1px solid #e0e0e6;
    .sub-title-text {
      margin: 10px 0;
      font-size: 22px;
      padding-left: 6px;
      vertical-align: top;
      & + div {
        padding: 10px 20px 20px 52px;
        line-height: 1.7;
      }
    }
  }
  // 评论
  .comment {
    border-top: 1px solid #e0e0e6;
    font-size: 14px;
    article {
      padding: 15px 60px 25px;
      .comment-list {
        & > div {
          padding: 20px 0 5px;
          & + div {
            border-top: 1px dashed #e1e1e1;
          }
        }
      }
    }
    li {
      border-bottom: none;
    }
    .imgs {
      img {
        width: 120px;
        height: 100px;
        margin-right: 5px;
      }
    }
    .content {
      margin: 5px 0 10px;
    }
    .name {
      font-size: 14px;
      color: $mainColor;
    }
    .time,
    .score {
      font-size: 14px;
    }
    .time {
      position: absolute;
      right: 20px;
      color: #333;
    }
    .score {
      margin-left: 15px;
      color: #888;
      em {
        color: $mainColor;
      }
    }
  }
  // 公用布局
  .common-wrap {
    margin-bottom: 10px;
    overflow: hidden;
    zoom: 1;
    .left {
      width: 980px;
      float: left;
      background: #fff;
    }
    .right {
      width: 205px;
      float: right;
    }
    .detail-title,
    .detail-short,
    .detail-sub-title {
      margin: 0 25px;
    }
    .detail-title {
      margin-top: 20px;
      margin-bottom: 5px;
    }
    .detail-short {
      color: #999;
      & > span {
        margin-right: 50px;
        & > span {
          color: $mainColor;
        }
      }
    }
    .detail-sub-title {
      background: #f1dfcb;
      padding: 15px 12.5px;
      margin-top: 20px;
      position: relative;
      line-height: 22px;
      & > span {
        color: #ff0000;
      }
    }
  }
  .common-title {
    padding-top: 10px;
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    color: #555;
    span {
      display: inline-block;
      font-size: 24px;
      &::before{
        padding: 8px;
        color: #fff;
        background-color: $mainColor;
        border-radius: 100%;
      }
    }
  }
  // 线路样式
  .route-box {
    padding: 0 15px;
    & > h2 {
      color: #333;
      letter-spacing: 0;
      font-size: 24px;
    }
    & > h2,
    .route-poster,
    .route-tips {
      margin-bottom: 10px;
      span {
        color: #888;
      }
    }
    .route-poster {
      img {
        max-width: 100%;
        & + img {
          margin-top: 8px;
        }
      }
    }
    .route-item {
      position: relative;
      & + .route-item {
        margin-top: 15px;
      }
    }
    .route-item-line {
      background-color: transparent;
      height: 100%;
      width: 5px;
      position: absolute;
      left: 10px;
      border: 1px solid #aabbd3;
      border-width: 0 1px 0 0;
      transform: scaleX(0.5);
    }
    .route-item-title {
      margin-bottom: 15px;
      background-color: #FDE7CE;
      .day,
      .title {
        display: inline-block;
      }
      .day {
        position: relative;
        z-index: 2;
        padding: 0 15px 0 25px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 22px;
        background-color: #F9AD57;
        &::before,
        &::after{
          position: absolute;
          right: -10px;
          content: "";
          width: 0;
          height: 0;
          border-color: #F9AD57;
          border-style: solid;
        }
        &::after{
          border-top-width: 25px;
          border-bottom-width: 0;
          border-left-width: 10px;
          border-right-width: 0;
          border-top-color: transparent;
          border-right-color: transparent;
        }
        &::before{
          top: 25px;
          border-top-width: 25px;
          border-bottom-width: 0;
          border-left-width: 0;
          border-right-width: 10px;
          border-right-color: transparent;
          border-bottom-color: transparent;
        }
      }
      .title {
        margin-left: 20px;
        line-height: 50px;
        font-size: 22px;
      }
    }

    .route-item-cnt {
      margin-left: 0.65rem;
      .title,
      .cnt {
        padding-left: 40px;
        color: #333;
      }
      .title {
        position: relative;
        font-size: 20px;
        margin-bottom: 10px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          left: -12px;
          top: -3px;
          width: 36px;
          height: 36px;
          background-repeat: no-repeat;
          background-position: left center;
          background-color: #fff;
        }
        &.jiaotong::before {
          background-image: url("~/public/imgs/line/jiaotong.png");
        }
        &.jiudian::before {
          background-image: url("~/public/imgs/line/jiudian.png");
        }
        &.jingdian::before {
          background-image: url("~/public/imgs/line/jingdian.png");
        }
        &.meishi::before {
          background-image: url("~/public/imgs/line/meishi.png");
        }
        &.qita::before {
          background-image: url("~/public/imgs/line/qita.png");
        }
        &.tiyan::before {
          background-image: url("~/public/imgs/line/tiyan.png");
        }
      }
      .item {
        margin-bottom: 10px;
      }
      .desc,
      .imgs {
        margin-bottom: 5px;
      }
      .imgs {
        img {
          width: 290px;
          height: 190px;
        }
      }
      .icon {
        position: relative;
        padding-left: 22px;
        color: #666;
        & > span {
          &:first-child {
            position: absolute;
            left: 0;
            top: -1px;
            margin-right: 3px;
            color: #aabbd3;
          }
        }
      }
    }
  }
  // 产品下单
  .product-order {
    margin-bottom: 15px;
    background-color: #fff;
    .room-list,
    .order-list {
      position: relative;
      overflow: hidden;
      &.showMore {
        max-height: none !important;
        .showMore {
          display: none;
        }
      }
      .showMore {
        padding: 15px 0;
        background-color: #fff;
        text-align: center;
        position: absolute;
        z-index: 99;
        bottom: 0;
        left: 0;
        right: 0;
        color: $mainColor;
        span:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
      button {
        position: relative;
        display: inline-block;
        width: 96px;
        height: 34px;
        line-height: 28px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #db4300;
        background: linear-gradient(to top, $priceColor, #d5500d);
        &+button{
          margin-left: 5px;
        }
        &.cart{
          width: 105px;
          border-color: #0090f2;
          background: #0090f2;
        }
        &.buy{
          &:hover{
            opacity: 0.85;
          }
        }
        &[disabled] {
          cursor: not-allowed;
          background: #bbb;
          border-color: #bbb;
        }
        &:not([disabled]):hover {
          cursor: pointer;
          .cart-box{
            left: -1px;
            transition: all 0.3s;
          }
        }
      }
    }
    .order{
      padding-top: 1px;
      .order-filter {
        padding: 15px 25px 15px;
        border-bottom: 1px dashed #f2f2f2;
        overflow: hidden;
        & > span {
          margin-right: 5px;
          color: #888;
        }
      }
      .order-list {
        padding: 0 15px;
        max-height: 355px;
      }
      .item {
        overflow: hidden;
        &>.cell{
          float: left;
          line-height: 40px;
          padding: 10px 5px;
          &.cell-title{
            width: 270px;
          }
          &.cell-con{
            width: 320px;
            color: #666;
          }
          &.cell-label{
            width: 220px;
          }
          &.cell-price{
            width: 120px;
            padding: 8px 5px;
          }
          &.cell-btn{
            float: right;
          }
        }
        h3,
        .labels {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        h3 {
          margin: 0 0 0 5px;
          font-size: 16px;
          font-weight: normal;
          color: #222;
        }
        .price {
          color: $priceColor;
          b {
            margin-right: 1px;
            font-size: 22px;
          }
          span {
            color: #999;
          }
        }
        .labels {
          span {
            display: inline-block;
            margin-right: 3px;
            line-height: 1.8;
            color: #888;
            font-size: 12px;
            border-radius: 2px;
            &:last-child{
              margin-left: 8px;
            }
          }
          em{
            margin-left: 1px;
            font-size: 12px;
          }
        }
        button {
          margin: 3px 5px 0 5px;
        }
        & + .item {
          border-top: 1px solid #efefef;
        }
      }
    }
    .hotel {
      padding: 10px 25px 0;
      .room-search {
        margin: 15px 0 25px;
        overflow: hidden;
        & > span {
          margin-right: 5px;
          color: #888;
        }
      }
      .room-search-btn {
        width: 96px;
        height: 36px;
        line-height: 36px;
        margin-left: 32px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background-color: $mainColor;
        margin-right: 28px;
        float: right;
        &:hover{
          opacity: .85;
          cursor: pointer;
        }
      }
      .room-list {
        width: 100%;
        max-height: 655px;
        background-color: #fff;
      }
      .room-list-title,
      .room-item {
        font-size: 0;
        & > div {
          font-size: 14px;
          color: #777;
          display: inline-block;
        }
      }
      .room-list-title {
        padding: 14px 0 14px 16px;
        background-color: #f2f2f2;
        .room-type {
          border-right: 5px solid #f2f2f2;
        }
      }
      .room-item {
        & > div {
          color: #333;
        }
        & + .room-item {
          border-top: 1px solid #efefef;
        }
        .room-type {
          padding: 15px 10px;
          border-right: 1px solid #e7e7e7;
        }
        .room-price {
          font-size: 12px;
          color: $priceColor;
          b {
            font-size: 20px;
          }
          span {
            color: #999;
          }
        }
        .room-stock {
          span {
            color: $priceColor;
            font-weight: 700;
          }
        }
        .room-facility {
          padding-right: 10px;
        }
      }
      .room-btn {
        position: relative;
        width: 210px;
      }
      .room-type {
        width: 240px;
        border: none;
        box-sizing: content-box;
        img {
          width: auto;
          height: 100%;
        }
        div {
          width: 80px;
          height: 80px;
          float: left;
          overflow: hidden;
        }
        p,
        span {
          padding-left: 10px;
        }
        p {
          height: 26px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 16px;
        }
        span {
          color: #777;
          &:hover {
            color: $mainColor;
            cursor: pointer;
          }
        }
      }
      .room-bed {
        width: 110px;
        padding-left: 20px;
      }
      .room-food {
        width: 110px;
      }
      .room-facility {
        width: 220px;
        span {
          margin-right: 10px;
          font-size: 12px;
          color: #999;
        }
      }
      .room-price {
        width: 120px;
      }
      .room-stock {
        width: 115px;
      }
    }
    .cart-box{
      transition: all 0.3s;
      position: absolute;
      z-index: 10;
      left: 125px;
      top: -1px;
      width: 112px;
      height: 34px;
      background: #fff;
      box-shadow: 0px 1px 5px 1px #ccc;
      input{
        height: 32px;
        padding-left: 5px;
      }
      &>div{
        width: 58px;
        float: left;
        border-right: none;
        border-radius: 2px 0 0 2px;
      }
      &>span{
        display: inline-block;
        height: 34px;
        line-height: 32px;
        padding: 0 15px;
        font-size: 12px;
        background: linear-gradient(to top, $priceColor, #d5500d);
        vertical-align: 1px;
        border-radius: 0 2px 2px 0;
        &:active,
        &:hover{
          opacity: 0.85;
        }
      }
    }
  }
  // 攻略详情（相关产品/攻略）
  .relate-wrap,
  .strategy-wrap {
    h2 {
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      font-weight: normal;
      margin-bottom: 5px;
      position: relative;
    }
  }
  .relate-wrap {
    margin: 0 0 10px;
    padding: 10px 25px 25px;
    background-color: #fff;
    .relate-pro-list {
      .item {
        width: 220px;
        display: inline-block;
        margin-right: 12px;
        font-size: 14px;
        transition: all 0.3s;
        &:nth-child(5n) {
          margin-right: 0;
        }
        h3,
        p > span {
          color: #777;
        }
        h3 {
          height: 42px;
          padding: 0 5px;
          font-size: 14px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          &:hover {
            text-decoration: underline;
          }
        }
        .price {
          margin-bottom: 15px;
          padding: 0 5px;
          color: #fd5e0d;
          em {
            margin-right: 2px;
            font-size: 18px;
            font-weight: 600;
          }
          span {
            font-size: 12px;
          }
        }
        img {
          margin-bottom: 10px;
          width: 100%;
          height: 160px;
        }
      }
    }
  }
  .strategy-wrap {
    padding: 20px 0;
    background-color: #f2f2f2;
    .strategy-pro-list {
      .item {
        position: relative;
        height: 209px;
        background-color: #fff;
        border: 1px solid #fff;
        border-bottom: 3px solid #e5e5e5;
        &:hover {
          border-color: #f68709;
          border-bottom-color: #f68709;
        }
        & + .item {
          margin-top: 10px;
        }
      }
      .image {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        width: 280px;
        height: inherit;
      }
      .info {
        padding: 20px 50px 0 305px;
        h3 > a {
          font-size: 18px;
          line-height: 25px;
          display: block;
          height: 50px;
          overflow: hidden;
          color: #000;
          font-weight: normal;
          &:hover {
            color: $mainColor;
          }
        }
        .desc {
          height: 62px;
          margin-bottom: 15px;
          color: #7c7c7c;
          line-height: 20px;
          overflow: hidden;
        }
        .desc + p {
          a {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            background: $mainColor;
            color: #fff;
            padding: 0 24px;
            font-size: 14px;
            font-weight: normal;
            vertical-align: top;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
      img {
        width: 100%;
        height: 205px;
      }
    }
  }
}

// 酒店详情
.room-popup {
  width: 800px;
  min-height: 570px;
  padding: 5px 10px;
  color: #252525;
  h3 {
    margin-bottom: 15px;
    font-size: 20px;
  }
  .room-popup-short {
    overflow: hidden;
  }
  .room-imgs {
    width: 480px;
    height: 300px;
    float: left;
    img {
      width: 100%;
      height: 300px;
    }
  }
  .room-item {
    margin-bottom: 15px;
    padding-left: 505px;
    & > span {
      padding-left: 24px;
      font-size: 16px;
    }
    & > span:first-child {
      padding-left: 0;
      color: #777;
    }
  }
  .room-popup-detail {
    padding-top: 15px;
  }
  .room-detail-item {
    & > span {
      padding: 10px 0;
      font-size: 16px;
      font-weight: bold;
    }
    & > p {
      color: #666;
    }
  }
}

// 活动详情
.activity-detail-page {
  .title{
    display: block;
    margin: 0 auto;
    width: 140px;
    margin: 40px auto 0;
    padding: 8px 0;
    font-size: 18px;
    text-align: center;
    color: $mainColor;
    border: 1px solid $mainColor;
  }
  .rule{
    position: relative;
    background: #f1dfcb;
    margin: 25px 25px 0;
    padding: 15px 12.5px 15px 55px;
    position: relative;
    line-height: 22px;
    & > span {
      position: absolute;
      left: 12.5px;
      color: #ff0000;
    }
  }
}
